<template>
  <div id='wrap'>
    <h1>组件 v-model</h1>
    <div class="group">
        <button @click="mVal++">在父组件修改mVal的值</button>
        <scu20 :mVal @updata:m-val="(val)=>{mVal=val}"></scu20>
    </div>
    <hr>
    <div class="group">
        <p @click="mVal++">在父组件修改mVal的值:{{ mVal }}</p>
        <p @click="mVal2++">在父组件修改mVal的值</p>
        <scu21 :mVal="mVal"
        :mVal2="mVal2"
        :userInfo="userInfo"
        @updata:m-val="(val)=>{mVal=val}"
        @updata:m-val2="(val:any)=>{mVal2=val}"
        @updata:user-info="(val:any)=>{userInfo=val}"
        ></scu21>
    </div>
    <hr>
    <div class="group">
        <p>{{ mVal }}</p>
        <hr>
        <scu22 v-model="mVal"></scu22>
    </div>
    <hr>
    <div class="group">
        <p>父组件绑定的标题:{{ title }}</p>
        <p>父组件绑定的标题:{{ msg }}</p>
        <p>父组件绑定book:{{ book }}</p>
        <hr>
        <scu23 v-model:title="title"
        v-model:msg="msg"
        v-model:book="book"
        ></scu23>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu26',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue'
import scu20 from "./component/scu20.vue";
import scu21 from "./component/scu21.vue";
import scu22 from "./component/scu22.vue";
import scu23 from "./component/scu23.vue";
import {type Book} from "./component/scu23.vue";
const mVal=ref(100)
const mVal2=ref(300)
const userInfo=ref({name:'小明',sex:'男',age:12})
const title=ref('父组件的标题')
const msg=ref('')
const book=ref<Book>({title:'一本新书',author:'米米',year:3000})
</script>

<style scoped lang='scss'>
.group{
    border: 2px solid rgb(60,130,200);
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}
</style>